<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>使用原生的js模拟jq的get请求</h1>
  <button class="btn1">点击我发送get形式的ajax</button>
  <script>
    class Jq {
      ajax (options) {
        console.log("执行了ajax函数", options);
        let { url = "", method = "get", data = {}, dataType = "json", success = function () { } } = options; // 获取options里的配置,设置默认参数
        console.log(url, method, data, dataType, success);
        let str = this.#o2s(data);
        console.log(str);
        url = url + "?" + str;
        // 参数处理了，根据参数发送ajax请求
        let xhr = new XMLHttpRequest();
        // 发送get请求之前，要把data :{myname:"zhangsan",age:20} 对象转成 querystring字符串 拼接到 url上
        xhr.open(method, url);
        xhr.send();
        xhr.onload = function () {
          if (xhr.status >= 200 && xhr.status < 300) {
            if (dataType == "text") {
              success(xhr.responseText); // 调用success函数
            } else {
              success(JSON.parse(xhr.responseText));
            }
          }
        }
      }
      #o2s (obj) {
        // {myname:"zhangsan",age:20} ---》 myname=zhangsan&age=20
        // 获取对象的所有key值
        let keys = Object.keys(obj); // keys= ["myname","age"];
        let values = Object.values(obj); // values = ["zhangsan",20];
        let arr = keys.map((key, k) => {
          // key : myname age   k ---> 0 1
          // 第一次 ： myname=zhangsan
          // 第二次 ： age=20
          // arr ---> ['myname=zhangsan','age=20']
          return `${key}=${values[k]}`;
        })
        return arr.join("&");
      }
    }
    let $ = new Jq();

    // 点击btn1发送ajax
    let btn1 = document.querySelector(".btn1");
    btn1.onclick = function () {
      $.ajax({
        url: "/getdata",
        method: "get",
        data: {
          myname: "chengyu",
          age: 22,
          height: "172cm"
        },
        dataType: "text",
        success: function (res) { //自定义success函数
          console.log(res);
        }
      })
    }
    // 1.promise封装  2.区分post请求
  </script>
</body>

</html>